<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
  <script src="../js/axios.min.js" type="text/javascript" charset="utf-8"></script>
  <title>Document</title>
</head>

<body>
  <div class="content" id="app">
    <div class="header">
      <!-- <span> 《 </span> -->
      <span>案例文件下载</span>
    </div>

    <!-- <div id="noApplicationRecord"></div> -->
    <div class="content_div" v-for="item in list" :key="item.fileUrl">
      <div class="content_img">
        <img src="../imgs/xx.png" alt="">
      </div>
      <div class="content_c">
        <div>
          <div class="content_fileName">{{item.fileName === null?"暂无名称":item.fileName}}</div>
          <div>259kb</div>
        </div>
        <div><a href="" @click="handleAddQuest(item)">下载</a></div>
      </div>
    </div>
  </div>
</body>
<script>
  // var noApplicationRecord = document.getElementById('noApplicationRecord')
  //模拟数据
  // var data = [
  //     {
  //         "fileName": null,
  //         "fileUrl": "http://134.64.251.212:8084/cpcp/api/downloadPic1/test.docx"
  //     },
  //     {
  //         "fileName": "a2.txt",
  //         "fileUrl": "http://134.64.251.212:8084/cpcp/api/downloadPic2/test.docx"
  //     },
  //     {
  //         "fileName": "a3.txt",
  //         "fileUrl": "20211011/67f9844e-4ef3-4374-9ea6-4052c5b7f468.jpg"
  //     }

  // ]
  // //绘制单个div
  // function setDiv(item) {
  //     var div = '<div class="content_div"><div class="content_img" >'
  //         + '<img src="../imgs/xx.png" alt="" id="div_img">'
  //         + '</div><div class="content_c">'
  //         + '</div>'
  //         + item.fileName + "<br/>"
  //         // + item.fileUrl
  //         + '<a href=' + item.fileUrl + '>下载</a>'
  //         // + '<a href=' + item.fileUrl + "onclick=" + downLoad(item) + '>下载</a>'
  //         + '<button onclick=' + downLoad(item) + '>下载</button>'
  //         + '</div>'
  //     return div
  // }
  // //循环加载到页面
  // function getnoApplicationData() {
  //     var html = ''
  //     for (var i = 0; i < data.length; i++) {
  //         html += setDiv(data[i])
  //     }
  //     noApplicationRecord.innerHTML = html
  // }

  // // window.onload = getnoApplicationData()
  // function downLoad(fileUrl) {
  //     console.log('22');
  //     console.log(fileUrl);
  // }
  let vm = new Vue({
    el: '#app',
    data: function () {
      return {
        list: [],
        data: [{
          "fileName": null,
          "filePath": "20211011/67f9844e-4ef3-4374-9ea6-4052c5b7f468.jpg"
        },
        {
          "fileName": "a2.txt",
          "filePath": "20211011/67f9844e-4ef3-4374-9ea6-4052c5b7f468.jpg"
        },
        {
          "fileName": "a3.txt",
          "filePath": "20211011/67f9844e-4ef3-4374-9ea6-4052c5b7f468.jpg"
        }

        ]
      }
    },
    created() {
      this.getData()

    },
    methods: {
      getData() {

        let thisUrl = window.location.href;
        if (thisUrl.indexOf("=") == -1) {
          console.info("参数不正确!")
          return;
        }
        let value = thisUrl.substr(thisUrl.indexOf("=") + 1, thisUrl.length)
        console.info(value)
        // let _this = this
        // let _url = baseUrl + '/shop/getMembers?shopName=' + this.shopName
        let url = "http://192.168.1.105:8501/cpcp/cpcpjsoncontent/getFile/" + value
        // url = "http://134.64.251.212:8084/cpcp/cpcpjsoncontent/getFile/" + value
        let params = new URLSearchParams();
        // params.append('id', this.id);
        axios.get(url).then(e => {
          console.log(e.data.data);
          this.setData(e.data.data)

        }).catch(error => { });
        // this.getnoApplicationData()
        let _data = [{
          "msg": "操作成功",
          "code": 200,
          "data": {
            "fileName": "developer_template.xlsx",
            "filePath": "developer_template.xlsx",
            "id": 1,
            "fileType": 1
          }
        }, {
          "msg": "操作成功",
          "code": 200,
          "data": {
            "fileName": "provinceData_template.xlsx",
            "filePath": "provinceData_template.xlsx",
            "id": 2,
            "fileType": 1
          }
        }, {
          "msg": "操作成功",
          "code": 200,
          "data": {
            "fileName": "provinceAssess_template.xlsx",
            "filePath": "provinceAssess_template.xlsx",
            "id": 3,
            "fileType": 1
          }
        }]
        this.setData(_data)
      },
      setData(data) {
        let thisList = []
        data.forEach(element => {
          console.info(element.data)
          thisList.push(element.data)
        });

        // this.list = (JSON.parse(e.data.data))
        this.list = thisList
        console.log("_this.list", this.list);
        this.getnoApplicationData()
      },
      //绘制单个div
      setDiv(item) {
        var div = '<div class="content_div"><div class="content_img" >' +
          '<img src="../imgs/xx.png" alt="" id="div_img">' +
          '</div><div class="content_c">' +
          '</div>' +
          item.fileName + "<br/>"
          // + item.fileUrl
          +
          '<a href=' + item.fileUrl + '>下载</a>'
          // + '<a href=' + item.fileUrl + "onclick=" + downLoad(item) + '>下载</a>'
          // +'<button onclick=' + downLoad(item) + '>下载</button>'
          +
          '</div>'
        return div
      },
      //循环加载到页面
      getnoApplicationData() {
        console.log("22222");
        console.log("3333", this.data);

        var html = ''
        // for (const iterator of this.list) {
        //     console.log("iterator", iterator);
        //     html += this.setDiv(iterator)
        // }
        for (var i = 0; i++; i < this.data.length) {
          console.log("42353");
          html += setDiv(this.data[i])
        }
        noApplicationRecord.innerHTML = html
      },
      downLoad(item) {
        console.log(item);
      },
      handleAddQuest(item) {
        console.log(item);
        // let _this = this
        // let _url = baseUrl + '/shop/getMembers?shopName=' + this.shopName
        let url = "http://192.168.1.105:8501/cpcp/api/downloadSftp" +
          `/filePath=${item.filePath}&fileName=${item.fileName}`
        let params = new URLSearchParams();
        // params.append('id', this.id);
        axios.get(url).then(e => {
          console.log(e);
          // window.location.href= "http://192.168.1.105:8501/cpcp/api/downloadSftp" + `/filePath=${item.filePath}&fileName=${item.fileName}`
          // this.list = (JSON.parse(e.data.data.fileIds))
          // console.log("_this.list", this.list);
          // this.getnoApplicationData()
        }).catch(error => { });
        // this.getnoApplicationData()

      }
    },
  })
</script>

<style>
  .header {
    width: 100%;
    line-height: 50px;
    background-color: rgb(6, 166, 250);
    text-align: center;
  }

  .header span {
    color: white;
  }

  .content {
    /* margin-left: 50px; */
    /* border-bottom: 1px solid rgb(226, 218, 218); */
    padding-bottom: 2px;

  }

  .content_div {
    margin-left: 50px;
    margin-top: 17px;
    position: relative;
    padding-top: 5px;
    display: flex;
    align-items: center;
  }

  .content_div::after {
    content: '';
    position: absolute;
    left: -31px;
    bottom: -14px;
    right: 0;
    /* left: 20px; */
    width: 387px;
    height: 1PX;
    background-color: #dcdcdc;
  }

  .content_div .content_img {
    width: 50px;
    height: 50px;
    display: inline-block;
    vertical-align: auto;
    vertical-align: middle
  }

  .content_div .content_img img {
    width: 100%;
    height: 100%;
    vertical-align: middle
  }

  .content_div .content_c {
    margin-left: 30px;
    display: flex;
    /* display: inline-block; */
  }

  .content_div .content_c .content_fileName {
    width: 150px;
    text-overflow: ellipsis;
    /*让截断的文字显示为点点。还有一个值是clip意截断不显示点点*/
    white-space: nowrap;
    /*让文字不换行*/
    overflow: hidden;
    /*超出要隐藏*/
  }

  .content_div .content_c div {
    padding-bottom: 4px;
  }

  button {
    margin-left: 20px;
    margin-top: 15px;
  }
</style>

</html>